import React, {useState,useEffect,useRef} from 'react';

import {Table, Modal, Button, Input, Select, message} from 'antd';
import {CloseOutlined, EditOutlined, SearchOutlined} from '@ant-design/icons';
import Axios from "../../util/axios";
import './juri.css'
function Juri()  {
    const { Option } = Select;
    const searchRef = useRef()//获取查询内容
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            width: 150,
        },
        {
            title: '用户',
            dataIndex: 'user',
            width: 150,
        },
        {
            title: '权限',
            dataIndex: 'juri',
            width: 150,
        },
        {
            title: '操作',
            dataIndex: 'address',
            width: 150,
        }
    ];
    const { Search } = Input;
//表格数据
    const [data,setData]=useState(
        []
    )
    //模态框状态
    const [isModalVisible, setIsModalVisible] = useState(false);
    //模态框值
    const [modal1,setModal1]=useState('1')
    const [xuanze,setXuanze]=useState("")
    const [modalid,setmodalid]=useState("")//修改数据的ID
    //点击修改按钮
    const showModal = (obj) => {
        setIsModalVisible(true);
        setModal1(obj.IdJuri)
        setmodalid(obj.Id)
    };
    //点击删除
    const delAnniu=(obj)=>{
        Axios.post('/juri/deljuri',{
            Id:obj.IdJuri
        }).then((res)=>{
                if(res.data.code===200)
                {
                    message.success('删除成功');
                    console.log("删除成功")
                    neironghuoqu()
                }
            }
        )
    }

    //确认修改
    const handleOk = () => {
        setIsModalVisible(false);
        console.log(modal1)
        console.log(modalid)
        Axios.post('/juri/revisejuri',{
            juri:modal1,
            Id:modalid
        }).then((res)=>{
                if(res.data.code===200)
                {
                    message.success('修改成功');
                    console.log("修改成功")
                    neironghuoqu()
                }
            }
        )



    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //下拉框
    function handleChange(value) {
        setModal1(value)
    }
    //获取内容
    const neironghuoqu=()=>{
        Axios.post('/juri/get',[]).then((res)=>{
            if(res){
                let arr= res.data.data.map((item,key)=>{
                    return {key: key,
                        id:key+1,
                        user:item.userName,
                        juri: item.NameJuri,
                        address:<div>
                            <Button type="primary"  shape="circle" onClick={()=>showModal(item)} >
                                <EditOutlined ></EditOutlined>
                            </Button>
                            <Button type="primary" shape="circle" onClick={()=>delAnniu(item)}>
                                <CloseOutlined></CloseOutlined>
                            </Button>
                        </div>}
                })
                setData(arr)
            }
        })
        Axios.post('/juri/getjuri',[]).then((res)=>{
                if(res){
                    let arr=res.data.data.map((item,key)=>{
                        return  (<Option key={key} value={item.IdJuri}>{item.NameJuri}</Option>)
                    })
                    setXuanze(arr)
                }
            }
        )
    }
//搜索
    const searchInfo = () => {
        Axios.post('/juri/queryjuri',{neirong:searchRef.current.state.value}).then((res)=>{
                if(res){
                    message.success('搜索成功');
                    let arr= res.data.data.map((item,key)=>{
                        return {key: key,
                            id:key+1,
                            user:item.userName,
                            juri: item.NameJuri,
                            address:<div>
                                <Button type="primary"  shape="circle" onClick={()=>showModal(item)} >
                                    <EditOutlined ></EditOutlined>
                                </Button>
                                <Button type="primary" shape="circle" onClick={()=>delAnniu(item)}>
                                    <CloseOutlined></CloseOutlined>
                                </Button>
                            </div>}
                    })
                    setData(arr)
                }
            }
        )



    }
    useEffect(()=>{
            neironghuoqu();
        },[]
    )
    return (
        <div>
            <div><h3>权限管理</h3></div>
            <div className='juriInfo'>
                    <Input  className='juriInput' ref={searchRef} placeholder="请输入用户名" prefix={<SearchOutlined />}/>
                    <Button type="primary"  shape="circle" onClick={searchInfo}><SearchOutlined /></Button>
            </div>

            <Table
                rowSelection={{
                    type: 'checkbox'
                }}
                columns={columns}
                dataSource={data}
                pagination={{pageSize: 5}}
                scroll={{y: 240}}/>
            <Modal title="修改权限" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Select value={modal1}  style={{ width: 120 }} onChange={handleChange}>
                    {xuanze}
                </Select>

            </Modal>

        </div>
    );
}

export default Juri;